<template>
	<view class="login">
		<view class="title">欢迎登录{{ title }}</view>
		<view class="prompt">
			还没有账号，<text>立即注册</text>
		</view>
		<view class="form">
			<view class="input">
				<uni-easyinput class="uni-easyinput" v-model="form.mobile" placeholder="请输入账号"></uni-easyinput>
			</view>
			<view class="input">
				<uni-easyinput class="uni-easyinput" v-model="form.verificationCode" placeholder="请输入验证码"></uni-easyinput>
				<view class="code" @click="handleGetCode">获取验证码</view>
			</view>
			<view class="button" @click="handleLogin">
				登录
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';
import { getCode, login } from '@/api/user/index.js';

const form = reactive({
	mobile: "13606914083",
	verificationCode: "",
	loginWay: 1, // 默认都用手机号登录
});

const store = useStore();

const title = computed(() => {
	return store.state.token
})

const handleGetCode = () => { // 获取验证码
	if (!form.mobile) {
		uni.toast("请输入手机号");
		return;
	}
	const params = {
		mobile: form.mobile,
		loginWay: 1,
	};
	getCode(params).then(res => {
		const { code, data } = res;
		if (res.code === 200) {
			form.verificationCode = data.code
		}
	})
}

const handleLogin = () => { // 登录
	if (!form.mobile) {
		uni.toast("请输入手机号");
		return;
	}
	if (!form.verificationCode) {
		uni.toast("请输入验证码");
		return;
	}
	login(form).then(res => {
		console.log(res);
		const { code, data, data: { token } } = res;
		if (code === 200) {
			store.commit({
				type: "login",
				userInfo: data,
				token
			});
			uni.switchTab({
				url: "../index/index"
			})
		}
	})
}
</script>

<style lang="scss" scoped>
@import '../../static/css/public.scss';

.login {
	padding: 30rpx;
	background-color: #fff;
	min-height: 100vh;
	
	.title {
		@include sc(34rpx, #333);
		padding-top: 40rpx;
		font-weight: bold;
	}
	
	.prompt {
		padding-top: 20rpx;
		@include sc(24rpx, #ccc);
		
		text {
			color: #FD4D4C;
		}
	}
	
	.form {
		padding-top: 30rpx;
		
		.input {
			border-bottom: solid 1rpx #EBEBEB;
			overflow: hidden;
			margin: 30rpx 0;
			@include fja();
			display: flex;
			
			.uni-easyinput {
				flex: 1;
			}
			
			.code {
				@include sc(22rpx, #FD4D4C);
				padding-left: 10rpx;
			}
		}
		
		::v-deep .is-input-border {
			border: none !important;
		}
		
		.button {
			margin-top: 80rpx;
			@include lineH(80rpx);
			background-color: #FD4D4C;
			text-align: center;
			color: #FFFFFF;
			border-radius: 44rpx;
		}
	}
}
</style>
